<template>
  <div class="clock h-screen w-screen flex justify-center items-center" @click="syncTime">
    <div v-for="h in  time.format('HH')">
      <Number :num="h"></Number>
    </div>
    <div class="colon">:</div>
    <div v-for="m in  time.format('mm')">
      <Number :num="m"></Number>
    </div>
    <div class="colon">:</div>
    <div v-for="s in  time.format('ss')">
      <Number :num="s"></Number>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Number from "./components/Number.vue"
import { invoke } from "@tauri-apps/api/tauri";
import dayjs from "dayjs";
import { ref } from "vue";

const syncTime = async () => {
  console.log(dayjs().valueOf());

  const res = (await invoke("time")) as string;
  console.log(dayjs().valueOf());
  const realTime = dayjs(res);
  if (realTime.isValid()) {
    offset.value = realTime.diff();
    console.log(offset.value);
  }
};
const offset = ref(0);
const time = ref(dayjs());
const refresh = () => {
  requestAnimationFrame(() => {
    time.value = dayjs(dayjs().valueOf() + offset.value);
    refresh();
  });
};
refresh();
</script>
<style lang="less">
.clock {
  font-size: 40px;
  font-weight: 900;
  font-family: sans-serif;
  cursor: pointer;
}
</style>
